<template>
  <div class="video">
    <video
      style="width: 100%; height: 100%; object-fit: fill"
      controls
      muted="muted"
      autoplay="autoplay"
      ref="videoPlayer"
      id="videoPlayer"
    ></video>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { webRTC } from "@/api/article";
interface states {
  videoPlayer: any;
}
export default defineComponent({
  props: {
    uuid: {
      type: String,
    },
    channel: {
      type: String,
    },
  },
  setup(props) {
    let webrtc: any, webrtcSendChannel: any;

    let state: states = reactive({
      videoPlayer: null,
    });
    onMounted(() => {
      let videoPlayer: any;
      // videoPlayer = document.getElementById("videoPlayer");
      console.log(state.videoPlayer);
      // console.log(videoPlayer);
      startPlay();
      function startPlay() {
        webrtc = new RTCPeerConnection({
          iceServers: [
            {
              urls: ["stun:stun.l.google.com:19302"],
            },
          ],
        });
        // console.log(webrtc);
        webrtc.onnegotiationneeded = handleNegotiationNeeded;
        webrtc.ontrack = function (event: any) {
          // console.log(event.streams.length + " track is delivered");
          // videoPlayer.srcObject = event.streams[0];
          // videoPlayer.play();
          state.videoPlayer.srcObject = event.streams[0];
          state.videoPlayer.play();
        };
        webrtc.addTransceiver("video", {
          direction: "sendrecv",
        });
        webrtcSendChannel = webrtc.createDataChannel("foo");
        webrtcSendChannel.onclose = () => console.log("sendChannel has closed");
        webrtcSendChannel.onopen = () => {
          webrtcSendChannel.send("ping");
          let webrtcSendChannelInterval = setInterval(() => {
            webrtcSendChannel.send("ping");
          }, 1000);
        };
        webrtcSendChannel.onmessage = (e: any) => console.log(e.data);
      }
      async function handleNegotiationNeeded() {
        let uuid = props.uuid;
        let channel = props.channel;
        let url =
          "/stream/" +
          uuid +
          "/channel/" +
          channel +
          "/webrtc?uuid=" +
          uuid +
          "&channel=" +
          channel;
        let offer = await webrtc.createOffer();
        // console.log(url, offer);
        await webrtc.setLocalDescription(offer);
        webRTC(url, { data: btoa(webrtc.localDescription.sdp) }).then(
          (res: any) => {
            // console.log(res);
            try {
              webrtc.setRemoteDescription(
                new RTCSessionDescription({
                  type: "answer",
                  sdp: atob(res),
                })
              );
            } catch (e) {
              console.warn(e);
            }
          }
        );
      }
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
.video {
  width: 100%;
  height: 100%;
}
</style>
